<template>
	<view class="main">
		<image style="width: 100%;" mode="widthFix" :src="info.meetImgurl" />
		<view class="date-part">
			<van-button icon="arrow-left" round plain color="#2D75D7" size="mini" @click="handleDeviation(-1)" />
			<text>{{ beginTimeStatusondition }}</text>
			至
			<text>{{ endTimeStatusCondition }}</text>
			<van-button icon="arrow" round plain color="#2D75D7" size="mini" @click="handleDeviation(1)" />
			<van-button style="margin-left: 20px;" plain hairline color="#2D75D7" size="small"
				@click="handleDeviation(0)">本周</van-button>
		</view>
		<uni-table border stripe class="date-table">
			<uni-tr>
				<uni-th align="center" v-for="(item, i) in dateList" :key="i" :class="{ 'istoday': isToDay(item.date) }">
					<text>{{ item.date }}</text>
					<text>{{ item.week }}</text>
				</uni-th>
			</uni-tr>
			<uni-tr>
				<uni-td class="date-table-td" align="center" v-for="(item, i) in dateList" :key="i">
					<uni-td align="center" :class="{ 'istoday': isToDay(item.date) }">上午</uni-td>
					<uni-td align="center" :class="{ 'istoday': isToDay(item.date) }">下午</uni-td>
				</uni-td>
			</uni-tr>
			<uni-tr v-if="file_is_show">
				<uni-td class="date-table-td tall-td" align="center" v-for="(item, i) in dateList" :key="i">
					<!-- 上午已预定 -->
					<uni-td v-if="item.m" align="center" style="background-color: #32B488;color: #fff;">
						<view @click="filterMeetList(item,item.date,0)">已预定</view>
					</uni-td>
					<uni-td v-else align="center">
						<view @click="goRes(item, 'm')" style="color: transparent;">未预定</view>
					</uni-td>

					<!-- 下午已预定 -->
					<uni-td v-if="item.n" align="center" style="background-color: #32B488;color: #fff;">
						<view @click="filterMeetList(item,item.date,1)">已预定</view>
					</uni-td>
					<uni-td v-else align="center">
						<view @click="goRes(item, 'n')" style="color: transparent;">未预定</view>
					</uni-td>
				</uni-td>
			</uni-tr>
		</uni-table>
		<view class="info-part">
			<p>
				<text>会议室场地: {{ info.orgName }}</text>
				<text>会议室名称: {{ info.meetName }}</text>
			</p>
			<p>
				<text>会议室编号: {{ info.meetId }}</text>
				<!-- <text>会议室容量: {{ info.numPeople }}</text> -->
			</p>
		</view>

		<div class="info-part" style="margin-bottom: 2px;" v-for="(item, index) in meetList" :key="index">
			<div style="font-weight: 600;font-size: 16px;color: #2D75D7;">
				预约时间段：{{ item.startTime.slice(0, 16) + '~' + item.endTime.slice(11, 16) }}</div>
			<p>
				<text>预约人: {{ item.flCreator }}</text>
				<text>联系方式: {{ item.flCreatorPhone }}</text>
			</p>
			<p>
				<text>参会人数: {{ item.meetingNum }}</text>
				<text>备注: {{ item.remark }}</text>
			</p>
		</div>
	</view>
</template>

<script>
	import {
		statusById,
		hyapList
	} from '../../../api'
	import {
		parseTime
	} from '../../../utils/format'
	export default {
		data() {
			return {
				id: '',
				beginTimeStatusondition: parseTime(new Date(), '{y}-{m}-{d}'),
				endTimeStatusCondition: parseTime(new Date(), '{y}-{m}-{d}'),
				info: {},
				dateList: [{
						date: '',
						week: '周一'
					},
					{
						date: '',
						week: '周二'
					},
					{
						date: '',
						week: '周三'
					},
					{
						date: '',
						week: '周四'
					},
					{
						date: '',
						week: '周五'
					},
					{
						date: '',
						week: '周六'
					},
					{
						date: '',
						week: '周日'
					},
				],
				deviation: 0,
				file_is_show: false,
				reInfo: {},
				meetList: [],
				nowTime: parseTime(new Date(), '{y}-{m}-{d}'),
				rowList: []
			}
		},
		watch: {
			dateList: {
				handler() { //这是vue的规定写法，当你watch的值发生变化的时候，就会触发这个handler，这是vue内部帮你做的事情
					this.file_is_show = false
					this.$nextTick(() => { // $nextTick 是在 DOM 更新循环结束之后执行延迟回调
						this.file_is_show = true
					})
				},
				deep: true, // 可以深度检测到 obj 对象的属性值的变化
				immediate: true //刷新加载  立马触发一次handler
			},
		},
		onLoad(e) {
			this.id = e.id
			this.init()
		},
		methods: {
			filterMeetList(item, time, type) {
				this.meetList = []
				console.log(11,this.rowList);
				if (type == 0) {
					this.meetList = this.rowList.filter(item => {
						// console.log(item.startTime.slice(5, 10), time, item.startTime.slice(11, 13));
						if (item.startTime.slice(5, 10) == time && item.startTime.slice(11, 13) < 12 && item.endTime.slice(11,
								13) > 12) {
							this.meetList.push(item)
						}
						if (item.startTime.slice(5, 10) == time && item.startTime.slice(11, 13) <= 12) {
							return item
						}
					})
				} else {
					this.meetList = this.rowList.filter(item => {
						console.log(item.startTime.slice(5, 10), time, item.startTime.slice(11, 13));
						if (item.startTime.slice(5, 10) == time && item.startTime.slice(11, 13) >= 12 || (item.startTime.slice(5,10) == time && item.startTime.slice(11, 13) < 12 && item.endTime.slice(11, 13) > 12)) {
							return item
						}
					})
					console.log(22,this.meetList);
				}
				this.meetList.length > 0 && this.meetList.sort((a, b) => a.startTime.slice(11, 13) - b.startTime.slice(11, 13))

			},
			isToDay(date) {
				if (date.split('-')[1] == new Date().getDate()) return true
			},
			goRes(info, f) {
				var day = new Date().getDate()
				var hours = parseTime(new Date(), '{hh}')
				var hm = this.beginTimeStatusondition.slice(0, 5) + info.date + " " + new Date().getHours() + ':' + (new Date()
					.getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes())
					
				function tiemout() {
					uni.showToast({
						title: '已过可预定时间',
						icon: 'error'
					})
				}
				console.log(1,hours,info.date.slice(3, 5) * 1 ,day);
				if (info.date.slice(3, 5) * 1 < day) {
					// tiemout()
					return
				}
				if (f == 'n' && hours > 18 && info.date.slice(3, 5) * 1 <= day) {
					console.log('n');
					// tiemout()
					return
				}
				if (f == 'm' && hours > 13 && info.date.slice(3, 5) * 1 <= day) {
					console.log('m');
					// tiemout()
					return
				}
				// uni.navigateTo({
				// 	url: `/pages/meeting/apply/index?meetName=${this.info.meetName}&meetingId=${this.id}&sTime=${hm}`
				// })
			},
			init() {
				statusById(this.id).then(res => {
					this.info = res.data.data
					this.getMonSunday()
				})
			},
			getMonSunday() {
				var now = new Date();
				var nowTime = now.getTime();
				var day = now.getDay();
				var oneDayTime = 24 * 60 * 60 * 1000;
				// 获取选择器上的日期
				nowTime = nowTime + oneDayTime * this.deviation * 7
				// console.log('nowTime', nowTime)
				//显示周一
				var MondayTime = nowTime - (day - 1) * oneDayTime;
				//显示周日
				var SundayTime = nowTime + (7 - day) * oneDayTime;
				//初始化日期时间
				var monday = new Date(MondayTime);
				var sunday = new Date(SundayTime);
				//打印查看结果
				// console.log(monday); //返回结果为时间戳
				// console.log(sunday);

				this.beginTimeStatusondition = parseTime(monday, '{y}-{m}-{d}')
				this.endTimeStatusCondition = parseTime(sunday, '{y}-{m}-{d}')

				this.dateList.forEach((e, i) => {
					e.date = parseTime(MondayTime + oneDayTime * i, '{m}-{d}')
					e.morning = {}
					e.afternoon = {}
					e.m = 0
					e.n = 0
				})
				this.queryDate()
			},
			queryDate() {
				const params = {
					beginTimeStatusondition: this.beginTimeStatusondition,
					endTimeStatusCondition: this.endTimeStatusCondition,
					meetingId: this.id
				}
				hyapList(params).then(res => {
					console.log(this.nowTime);
					this.rowList = res.data.rows
					this.meetList = res.data.rows.filter((item, index) => {
						return item.startTime.slice(0, 10) === this.nowTime ? item : ''
					})
					console.log('meetList', this.meetList)

					const updatedList = this.dateList.map(item => {
						const matchedMorning = res.data.rows.find(e => {
							if (item.date.slice(3, 5) * 1 == e.endTime.slice(8, 10) * 1 && e.endTime.slice(11, 13) <= 12) {
								return e
							}
						});
						const matchedAfternoon = res.data.rows.find(e => {
							if (item.date.slice(3, 5) * 1 == e.endTime.slice(8, 10) * 1 && e.endTime.slice(11, 13) > 12) {
								return e
							}
						});

						return {
							...item,
							m: matchedMorning ? 1 : 0,
							n: matchedAfternoon ? 1 : 0,
							afternoon: matchedAfternoon,
							morning: matchedMorning
						};
					});
					this.dateList = updatedList; // 替换整个数组，触发响应式更新
				})
			},
			handleDeviation(step) {
				if (step == 0) {
					this.deviation = 0
				} else {
					this.deviation += step
				}
				this.getMonSunday()
			}
		}
	}
</script>

<style scoped lang="scss">
	.main {
		background-color: #f5f5f5;
		min-height: 100vh;
	}

	.date-part {
		padding: 10px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 15px;

		text {
			margin: 0 15px;
			font-size: 16px;
		}
	}

	.info-part {
		background-color: #fff;
		padding: 20px 15px;
		font-size: 15px;
		margin-bottom: 10px;
		line-height: 30px;
		// padding-bottom: 0;

		p {
			display: grid;
			grid-template-columns: 1fr 1fr;
			justify-content: space-between;
			font-size: 14px;
		}

		.btn-extend {
			display: flex;
			justify-content: center;
			font-size: 12px;
			color: #2D75D7;
			margin-top: 10px;
		}
	}

	.date-table {
		table {
			min-width: 0 !important;
		}

		::v-deep .uni-table-th-content {
			flex-direction: column;
		}

		&-td {
			padding: 0;
		}

		.tall-td {
			min-height: 146px;

			::v-deep .uni-table-td {
				line-height: 43px;
			}
		}
	}

	.monk {
		background-color: #fff;
		position: fixed;
		top: 50%;
		left: 30%;
		padding: 10px;

		text {
			display: block;
			font-size: 0.8rem;
			font-weight: 500;
			color: #555;
			margin-bottom: 5px;
		}
	}

	.istoday {
		background-color: #2D75D7;
		color: #fff !important;
	}
</style>